<template>
  <div class="container">
    <div class="sewv">
      <div
        ref="select"
        class="sewvtop"
      ><input
          class="ipt"
          type="text"
          :value="value"
          @focus="selectDown"
          @blur="selectOk"
          readonly
        />
        <em
        @click="selectDown"
          ref="arrow"
          class="lbaxztop"
        ><svg
            t="1663229387243"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1995"
            width="16"
            height="16"
          >
            <path
              d="M512 704c8.288 0 15.776-3.232 21.456-8.4l0.064 0.08 352-320-0.08-0.08c6.448-5.856 10.56-14.208 10.56-23.6a32 32 0 0 0-32-32c-8.288 0-15.76 3.232-21.456 8.4l-0.08-0.08L512 628.752 181.536 328.32l-0.08 0.08A31.776 31.776 0 0 0 160 320a32 32 0 0 0-32 32c0 9.376 4.112 17.744 10.544 23.6l-0.08 0.08 352 320 0.08-0.08c5.68 5.168 13.168 8.4 21.456 8.4z"
              p-id="1996"
            ></path>
          </svg></em>
      </div>
      <ul
        ref="content"
        class="sewvbm"
        style="display: none;"
        @click="selectValue"
      >
        <li
          v-for="(item,index) in options"
          :key="index"
        >{{item.value}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '请选择',
      options: [
        { name: 'a1', value: 'a1', selected: true },
        { name: 'a2', value: 'a2' },
        { name: 'a3', value: 'a3' }
      ]
    }
  },
  methods: {
    selectDown () {
      this.$refs.content.style.display = 'block'
      this.$refs.arrow.style.transform = 'rotate(180deg)'
    },
    selectOk () {
      this.$refs.content.style.display = 'none'
      this.$refs.arrow.style.transform = 'rotate(360deg)'
    },
    hide () {},
    selectValue () {}
  }
}
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
  border: 1px solid #e6e6e6;
}
// input[type="text"] {
//   color: yellow;
//   font-size: 16px;
// }
// input::-webkit-input-placeholder {
//   color: red;
//   font-size: 16px;
// }
.ipt {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
}
.sewv {
  position: relative;
  width: 100px;
  display: inline-block;
  vertical-align: middle;
}
.sewvtop {
  width: 100%;
  height: 23px;
  cursor: pointer;
  overflow: hidden;
}
.sewvtop > em {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  right: 0;
  z-index: 100;
  height: 100%;
  padding-right: 4px;
}
.sewvtop > span {
  float: left;
  width: 70%;
  height: 23px;
  white-space: pre;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12px;
  line-height: 22px;
  color: #666;
  padding: 0 5px;
  vertical-align: middle;
}

.sewvbm {
  width: 100%;
  position: absolute;
  left: 0;
  top: 25px;
  display: none;
}
.sewvbm > li {
  cursor: pointer;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #666;
  padding-left: 5px;
}
</style>
